<template>
  <div v-waterMarker="{ hide: !!props.hideMarker }" :class="['merak-collapse-item', { 'is-active': active }]" :data-name="props.name">
    <div class="merak-collapse-item--header">
      <div class="merak-collapse-item--header-title" @click="() => onChange?.(props.name)">
        <CaretBottom v-if="active" />
        <CaretRight v-else />
        <slot v-if="Object.keys($slots).some(slot => slot === 'title')" name="title" />
        <span v-else-if="!!props.title">
          {{ props.title }}
        </span>
      </div>
      <div class="merak-collapse-item--header-handler">
        <slot name="handler" />
      </div>
    </div>
    <ElCollapseTransition>
      <div v-show="active" class="merak-collapse-item--body">
        <div class="merak-collapse-item--body-wrapper">
          <slot />
        </div>
      </div>
    </ElCollapseTransition>
  </div>
</template>

<script setup lang="ts">
import { Ref, inject, computed } from "vue";

import { CaretRight, CaretBottom } from "@element-plus/icons-vue";

import { ElCollapseTransition } from "element-plus";

const props = defineProps<{ name: string; title?: string; hideMarker?: boolean }>();

const { actives, onChange } = inject<{
  actives?: Ref<string[]>;
  onChange?: (name: string) => void;
}>("merak-collapse", {});

const active = computed(() => actives?.value.includes(props.name));
</script>
